<script lang="ts" setup>

import IndexItem from '@/components/layout/Asides/IndexItem.vue';
import Popovers from '@/components/common/Popovers.vue';

const props = defineProps({
  nameClass: String
});
</script>

<template>
  <Popovers :isShow="$isMobile">
    <template #reference>
      <div class="logo flexCenterCenter sidebar">
        <div :class="{ 'logoMobile': $isMobile }">
          <img class="logo" src="@/assets/img/logo.svg" />
        </div>
        <!-- <span :class="props.nameClass">{{ $t('assets.title') }} </span> -->
        <span :class="props.nameClass">{{ $t('assets.title') }} </span>
     
      </div>
    </template>
    <IndexItem></IndexItem>
  </Popovers>
</template>

<style lang="scss" scoped>
.logo {
  height: var(--el-header-height);

  img {
    height: 35px;
    margin-right: 10px;
  }

  .logoMobile {
    width: 35px;
    height: 35px;
    overflow: hidden;
    margin-right: 6px;
  }

  span {
    text-align: center;
    font-weight: 700;
    color: var(--sider-dark-darken-text-color);
  }

  // 设置里 导航栏模式 3
  .header_left_text_span {
    color: var(--text-colse-1);
  }
}

// 设置里 导航栏模式 2
.sidebar {

  span {
    color: var(--bg-color);
  }
}
</style>
